<template>
  <div>
    <sui-sidebar-pushable>
      <sui-menu
        is="sui-sidebar"
        :visible="show"
        animation="scale down"
        width="thin"
        icon="labeled"
        inverted
        vertical
      >
        <sui-menu-item>
          <sui-icon name="home"/>
          Home
        </sui-menu-item>
        <sui-menu-item>
          <sui-icon name="home"/>
          Home
        </sui-menu-item>
        <sui-menu-item>
          <sui-icon name="home"/>
          Home
        </sui-menu-item>
      </sui-menu>

    <sui-sidebar-pusher :dimmed="show">
      <sui-container class="cot" >
        <h2 is='sui-header'>
          Sidebar
          <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
        </h2>
        <sui-divider/>

        <sui-button
          class="labeled"
          icon="sidebar"
          content="菜单"
          @click="visible"
        />
      </sui-container>
    </sui-sidebar-pusher>
    </sui-sidebar-pushable>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      show: false
    }
  },
  methods: {
    visible () {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
.cot {
  padding: 50px !important;
  height: 900px !important;
}
</style>
